<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的笔记</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../common/mui/mui.css" rel="stylesheet" />
		<link href="../common/css/yahei.css" rel="stylesheet" />
		<link href="../common/css/webfont.css" rel="stylesheet" />
		<link href="../common/css/iconfont.css" rel="stylesheet" />
		<link href="../common/css/app.css" rel="stylesheet" />
		<link href="../dependence/teach/css/teachPublic.css" rel="stylesheet" />
		<style type="text/css">
			.searchArea{
				height: var(--searchHeight);
			}
			.mui-scroll-wrapper{
				top: calc(var(--searchHeight) + 44px);
			}
			#UL > .mui-table-view-cell{
				display: flex;
				flex-wrap: wrap;
				margin-top: 0;
				padding: var(--size15);
			}
			
			.noteTitle{
				font-size: var(--size15);
				width: calc(100% - var(--size40));
				line-height: 1.5;
			}
			.downIcon,.upIcon{
				position: absolute;
				top: var(--size15);
				right: var(--size15);
				width: var(--size22);;
				height: var(--size22);
				line-height: var(--size22);
				color: lightgray;
				font-size: var(--size22);
				text-align: right;
			}
			.upIcon{
				display: none;
			}
			.mui-table-view-cell .mui-table-view-cell{
				margin: 0;
				padding: var(--size10) var(--size10) 0;
				width: 100%;
				border-radius: 0;
				box-shadow: 0 0 0 transparent;
			}
			.noteDate{
				color: gray;
				width: 100%;
				font-size: var(--size12);
			}
			.noteContent{
				width: 100%;
				font-size: var(--size14);
				line-height: 1.6;
				color: #555555;
			}
			.mui-table-view-cell ul,.mui-table-view-cell.dhc-active .downIcon{
				display: none;
			}
			.mui-table-view-cell.dhc-active ul,.mui-table-view-cell.dhc-active .upIcon{
				display: block;
			}
		</style>
	</head>

	<body class="YaHei">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的笔记</h1>
		</header>
		<div class="mui-content">
			<div class="searchArea">
				<div class="mui-input-row mui-search">
					<input id="search" type="search" class="mui-input-clear" placeholder="搜索"/>
				</div>
			</div>
			<div id="wrapper" class="mui-scroll-wrapper folderType">
				<div id="scroll" class="mui-scroll mui-scroll-phone">
					<ul id="UL" class="mui-table-view"></ul>
				</div>
			</div>
		</div>
		<script src="../common/mui/mui.js"></script>
		<script src="../common/mui/mui.pullToRefresh.js"></script>
		<script src="../common/mui/mui.pullToRefresh.material.js"></script>
		<script src="../common/js/globalSet.js"></script>
		<script src="../common/js/jquery-3.4.1.min.js"></script>
		<script src="../common/js/DHCWebService.js"></script>
		<script src="../common/js/app.js"></script>
		
<script>
(function($) {
	var notePull,sourceData;
	var start = 0,Limit = 20;
	var nurseid = ''
	var pulling = false;
	$.init();
	$.plusReady(function() {
		baseSetup();
	})
	if (!mui.os.plus) {
		baseSetup()
	}
	function getNoteData(){
		if (pulling) {
			notePull.endPullUpToRefresh()
			return;
		}
		pulling = true
		var pdict = {'type':'N','input':$('#search')[0].value,'loginID':nurseid,'start':start,'limit':Limit}
		var paramDict = {'method':'web.INMTeaComm:FindDrillVideoInfoList','params':JSON.stringify(pdict),'type':'RecQuery'}
		//console.log(JSON.stringify(pdict))
		$.DHCWebService(paramDict, function(result) {
			//console.log(JSON.stringify(result))
			var dataArr = result.data
			if (!dataArr) {
				notePull.endPullUpToRefresh();
				pulling = false
				return;
			}
			
			if (start == 0) {
				sourceData = dataArr;
			}else{
				sourceData = sourceData.concat(dataArr)
			}
			if (dataArr.length < Limit) {
				notePull.endPullUpToRefresh(true);
			}else{
				notePull.endPullUpToRefresh();
			}
			updateUI(dataArr)
			start += dataArr.length;
			pulling = false
		}, function(errorStr) {
		 	notePull.endPullUpToRefresh();
		 	pulling = false
		});
	}
	function updateUI(dataArr){
		var UL = document.getElementById("UL");
		if (start == 0) {
			UL.innerHTML = ''
		}
		for(var i = 0; i < dataArr.length; i++){
			var dict = dataArr[i]
			var newLi = document.createElement('li')
			newLi.setAttribute('class','mui-table-view-cell')
			var cellUL = mui('#'+dict['id'])[0]
			var html = '<div class="noteDate">'+dict['infoTime']+'</div>'+
				'<div class="noteContent">'+dict['context']+'</div>';
			if (cellUL) {
				cellUL.appendChild(newLi)
				newLi.innerHTML = html
				continue
			}
			html = '<div class="noteTitle">'+(dict['desc']||'课程标题')+'</div>'+
				'<div class="mui-icon mui-icon mui-icon-arrowright downIcon"></div>'+
				'<div class="mui-icon mui-icon-arrowup upIcon"></div>'+
				'<ul id="'+dict['id']+'" class="mui-table-view">'+
					'<li class="mui-table-view-cell">'+html+'</li>'+
				'</ul>';
			UL.appendChild(newLi)
			newLi.innerHTML = html
			if (start == 0 && i == 0) {
				newLi.classList.add('dhc-active')
			}
			newLi.addEventListener('tap',tableViewCellTapped) //查看结果
		}
	}
	function tableViewCellTapped(){
		if (this.getAttribute('class').indexOf('dhc-active') != -1) {
			this.classList.remove('dhc-active')
			return;
		}
		if ($('#UL .dhc-active')[0]) {
			$('#UL .dhc-active')[0].classList.remove('dhc-active');
		}
		this.classList.add('dhc-active')
	}
	
	function baseSetup() {
		$('.mui-scroll-wrapper').scroll({
			bounce: true,
			indicators: false, //是否显示滚动条
		});
		var perInfo = app.getState()
		nurseid = perInfo['loginID']
		mui("body").on("tap", ".searchArea .mui-icon-clear", function() {
			if ($('#search')[0] != "") {
				$('#search')[0].value = ""
			}
			resetNotRefresh()
		});
		var search =  $('#search')[0];
		search.addEventListener('input',function(){
			resetNotRefresh()
		});
		var scroll = $('#scroll')[0];
		notePull = $(scroll).pullToRefresh({
			up: {
				callback: function() {
					getNoteData()
				}
			}
		});
		getNoteData();
	}
	function resetNotRefresh(){
		start = 0;
		sourceData = []
		if (notePull) {
			notePull.refresh(true)
		}
		getNoteData();
		$('#wrapper').scroll().scrollTo(0,0,100);
	}
	
})(mui);

</script>
	</body>

</html>
